<template>
  <div class="layout-wrapper">
    <!-- Header -->
    <el-header class="header">
      <div class="header-content">
        <img alt="" src="../../assets/imgs/logo.png" class="logo" />
        <div class="title">药店销售管理系统管理员中心</div>
        <el-dropdown class="user-dropdown" placement="bottom">
          <div class="user-info">
            <img :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="User Avatar" class="avatar"/>
            <span class="user-name">管理员：{{ data.user.name }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>

    <!-- Main layout -->
    <div class="main-content">
      <!-- Sidebar -->
      <el-aside class="sidebar">
        <el-menu :default-active="router.currentRoute.value.path" :default-openeds="['/home', '2']" router class="menu" default-openeds="">
          <el-menu-item index="/ADMIN/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>

          <!-- Sales Management -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Management /></el-icon>
              <span>管理销售数据</span>
            </template>
            <el-menu-item index="/ADMIN/countSaleDataGraph">
              <el-icon><DocumentCopy /></el-icon>
              <span>销售数据统计分析</span>
            </el-menu-item>
            <el-menu-item index="/ADMIN/orderManager">
              <el-icon><DocumentCopy /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="/ADMIN/ReviewReturnOrder">
              <el-icon><DocumentCopy /></el-icon>
              <span>退货订单审核</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- System Management -->
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/ADMIN/empManager">
              <el-icon><DocumentCopy /></el-icon>
              <span>员工管理</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- Stock Management -->
          <el-sub-menu index="3">

            <template #title><el-icon><Management /></el-icon>库存管理</template>
            <el-menu-item index="/ADMIN/countStock">
              <el-icon><DocumentCopy /></el-icon>
              <span>库存数据分析</span>
            </el-menu-item>
            <el-menu-item index="/ADMIN/manageStock">
              <el-icon><DocumentCopy /></el-icon>
              <span>库存管理</span>
            </el-menu-item>
            <el-menu-item index="/ADMIN/stockWarning">
              <el-icon><Warning /></el-icon>
              <span>库存预警</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/ADMIN/damageReport">
            <el-icon><Management /></el-icon>
            <span>货物报损单管理</span>
          </el-menu-item>

          <!-- Personal Info -->
          <el-menu-item index="/ADMIN/updateInfo">
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-menu-item>

          <!-- Logout -->
          <el-menu-item index="/login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- Main Content -->
      <el-main class="main">
        <router-view @updateUser="updateUser"/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import router from "@/router";
import { ElMessage } from "element-plus";
import { expiration, setToExpireLocalStroage } from "@/utils/LocalStroageUtil";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
})

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem('system-user') || '{}')
}

const logout = () => {
  ElMessage.success('退出成功')
  localStorage.removeItem('system-user')
  router.push('/')
}

// 设置过期
setToExpireLocalStroage(expiration)
</script>

<style scoped>
@import url('@/assets/css/menu.css');
</style>
